<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <meta charset="utf-8">

  <META NAME="Description" CONTENT="">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=0.8, user-scalable=no">


  <style >
    
    html,
    body {

      height: 100%;

      padding: 0;

      margin: 0;

      background: #000;

    }

    canvas {

      position: absolute;

      width: 100%;

      height: 100%;

    }

    #txt1 {
      color: red;
      font-family: "Lucida Calligraphy", cursive, serif, sans-serif !important;

      writing-mode: vertical-lr;
      /*从左向右 从右向左是 writing-mode: vertical-rl;*/
      writing-mode: tb-lr;
      /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/

    }
   #txt2 {
      color: white;
      font-family: "Lucida Calligraphy", cursive, serif, sans-serif !important;

      writing-mode: vertical-lr;
      /*从左向右 从右向左是 writing-mode: vertical-rl;*/
      writing-mode: tb-lr;
      /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/

    }

    /* @media (max-width: 320px) {

     
      body {
        background: pink;
      }
    } */

    @media (max-width: 768px) {
      #txt1 {
        height: 200px;
        font-size: 18px;
        line-height: 18px;
    

        margin-top: 10vh;
        margin-left:  40%;
      }

      canvas {
        margin-top: 10vh;
      }

      /*321~768*/

    }

    @media (min-width: 768px) and (max-width: 900px) {

      #txt1 {
        height: 220px;
        font-size: 20px;
        line-height: 20px;
        margin-top: 30vh;
        margin-left: 6vw;
      }

      /*376~425*/

    }

    @media (min-width: 900px) and (max-width: 1200px) {

      #txt1 {
        height: 220px;
        font-size: 22px;
        line-height: 26px;
        margin-top: 30vh;
        margin-left: 10vw;
      }

      /*426~768*/

    }

    @media (min-width: 1200px) {

      /*769~+∞*/
      #txt1 {
        height: 280px;
        font-size: 24px;
        line-height: 30px;
        margin-top: 30vh;
        margin-left: 15vw;
      }


    }
    @media (min-width: 1200px) {

      /*769~+∞*/
      #txt2 {
        height: 280px;
        font-size: 24px;
        line-height: 30px;
        margin-top: 30vh;
        margin-left: 15vw;
      }


    }
  </style>

</HEAD>

<BODY>

  <canvas id="pinkboard"></canvas>

  <script>

    /*
  
   * Settings
  
   */

    var settings = {

      particles: {

        length: 500, // maximum amount of particles

        duration: 2, // particle duration in sec

        velocity: 100, // particle velocity in pixels/sec

        effect: -0.75, // play with this for a nice effect

        size: 30, // particle size in pixels

      },

    };

    /*
    
     * RequestAnimationFrame polyfill by Erik Möller
    
     */

    (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());

    /*
    
     * Point class
    
     */

    var Point = (function () {

      function Point(x, y) {

        this.x = (typeof x !== 'undefined') ? x : 0;

        this.y = (typeof y !== 'undefined') ? y : 0;

      }

      Point.prototype.clone = function () {

        return new Point(this.x, this.y);

      };

      Point.prototype.length = function (length) {

        if (typeof length == 'undefined')

          return Math.sqrt(this.x * this.x + this.y * this.y);

        this.normalize();

        this.x *= length;

        this.y *= length;

        return this;

      };

      Point.prototype.normalize = function () {

        var length = this.length();

        this.x /= length;

        this.y /= length;

        return this;

      };

      return Point;

    })();

    /*
    
     * Particle class
    
     */

    var Particle = (function () {

      function Particle() {

        this.position = new Point();

        this.velocity = new Point();

        this.acceleration = new Point();

        this.age = 0;

      }

      Particle.prototype.initialize = function (x, y, dx, dy) {

        this.position.x = x;

        this.position.y = y;

        this.velocity.x = dx;

        this.velocity.y = dy;

        this.acceleration.x = dx * settings.particles.effect;

        this.acceleration.y = dy * settings.particles.effect;

        this.age = 0;

      };

      Particle.prototype.update = function (deltaTime) {

        this.position.x += this.velocity.x * deltaTime;

        this.position.y += this.velocity.y * deltaTime;

        this.velocity.x += this.acceleration.x * deltaTime;

        this.velocity.y += this.acceleration.y * deltaTime;

        this.age += deltaTime;

      };

      Particle.prototype.draw = function (context, image) {

        function ease(t) {

          return (--t) * t * t + 1;

        }

        var size = image.width * ease(this.age / settings.particles.duration);

        context.globalAlpha = 1 - this.age / settings.particles.duration;

        context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);

      };

      return Particle;

    })();

    /*
    
     * ParticlePool class
    
     */

    var ParticlePool = (function () {

      var particles,

        firstActive = 0,

        firstFree = 0,

        duration = settings.particles.duration;

      function ParticlePool(length) {

        // create and populate particle pool

        particles = new Array(length);

        for (var i = 0; i < particles.length; i++)

          particles[i] = new Particle();

      }

      ParticlePool.prototype.add = function (x, y, dx, dy) {

        particles[firstFree].initialize(x, y, dx, dy);



        // handle circular queue

        firstFree++;

        if (firstFree == particles.length) firstFree = 0;

        if (firstActive == firstFree) firstActive++;

        if (firstActive == particles.length) firstActive = 0;

      };

      ParticlePool.prototype.update = function (deltaTime) {

        var i;



        // update active particles

        if (firstActive < firstFree) {

          for (i = firstActive; i < firstFree; i++)

            particles[i].update(deltaTime);

        }

        if (firstFree < firstActive) {

          for (i = firstActive; i < particles.length; i++)

            particles[i].update(deltaTime);

          for (i = 0; i < firstFree; i++)

            particles[i].update(deltaTime);

        }



        // remove inactive particles

        while (particles[firstActive].age >= duration && firstActive != firstFree) {

          firstActive++;

          if (firstActive == particles.length) firstActive = 0;

        }





      };

      ParticlePool.prototype.draw = function (context, image) {

        // draw active particles

        if (firstActive < firstFree) {

          for (i = firstActive; i < firstFree; i++)

            particles[i].draw(context, image);

        }

        if (firstFree < firstActive) {

          for (i = firstActive; i < particles.length; i++)

            particles[i].draw(context, image);

          for (i = 0; i < firstFree; i++)

            particles[i].draw(context, image);

        }

      };

      return ParticlePool;

    })();

    /*
    
     * Putting it all together
    
     */

    (function (canvas) {

      var context = canvas.getContext('2d'),

        particles = new ParticlePool(settings.particles.length),

        particleRate = settings.particles.length / settings.particles.duration, // particles/sec

        time;

      // get point on heart with -PI <= t <= PI

      function pointOnHeart(t) {

        return new Point(

          160 * Math.pow(Math.sin(t), 3),

          130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25

        );

      }

      // creating the particle image using a dummy canvas

      var image = (function () {

        var canvas = document.createElement('canvas'),

          context = canvas.getContext('2d');

        canvas.width = settings.particles.size;

        canvas.height = settings.particles.size;

        // helper function to create the path

        function to(t) {

          var point = pointOnHeart(t);

          point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;

          point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;

          return point;

        }

        // create the path

        context.beginPath();

        var t = -Math.PI;

        var point = to(t);

        context.moveTo(point.x, point.y);

        while (t < Math.PI) {

          t += 0.01; // baby steps!

          point = to(t);

          context.lineTo(point.x, point.y);

        }

        context.closePath();

        // create the fill

        context.fillStyle = 'pink';

        context.fill();

        // create the image

        var image = new Image();

        image.src = canvas.toDataURL();

        return image;

      })();

      // render that thing!

      function render() {

        // next animation frame

        requestAnimationFrame(render);



        // update time

        var newTime = new Date().getTime() / 1000,

          deltaTime = newTime - (time || newTime);

        time = newTime;



        // clear canvas

        context.clearRect(0, 0, canvas.width, canvas.height);



        // create new particles

        var amount = particleRate * deltaTime;

        for (var i = 0; i < amount; i++) {

          var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());

          var dir = pos.clone().length(settings.particles.velocity);

          particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);

        }



        // update and draw particles

        particles.update(deltaTime);

        particles.draw(context, image);

      }

      // handle (re-)sizing of the canvas

      function onResize() {

        canvas.width = canvas.clientWidth;

        canvas.height = canvas.clientHeight;

      }

      window.onresize = onResize;

      // delay rendering bootstrap

      setTimeout(function () {

        onResize();

        render();

      }, 10);

    })(document.getElementById('pinkboard'));


   
</script>

  <!-- <head><font color="#fff">你还度搜风好大</font></head> -->

  <font id="txt1" color="#f00"></font>

<!-- <div id="music">
  <audio src="http://music.163.com/song/media/outer/url?id=144378.mp3" controls="controls" autoplay hidden="true" style="display:none;"/>
</div> -->

  <!-- <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto"
              src="http://music.163.com/song/media/outer/url?id=144378.mp3"> -->

     <!-- <audio autoplay="autoplay" loop="loop"> <source src="http://music.163.com/song/media/outer/url?id=144378.mp3"> </audio> -->
    
<!-- <bgsound src="http://music.163.com/song/media/outer/url?id=144378.mp3" autostart=true loop=infinite>  -->
<!-- <embed src="http://music.163.com/song/media/outer/url?id=144378.mp3" hidden="true" autostart="true" loop="true"> -->

</BODY>

</HTML>

<script>


  var s = 0;
  var s2 = "&nbsp";
  var str = "所爱隔山海，山海皆可越 我愿提笔画尽天下 只为许你一世繁华  你若安好便是晴天 致邓明珠";
  var str1 = "只为许你一世繁华";
  var str2 = "所在隔山海，山海皆可约";
  var str3 = "致邓明珠";
  var str4 = "2022年11月25";
  var v = ""

  function typing() {
    //获取div
    var mydiv = document.getElementById("txt1");
    v = str.charAt(s);

    if(v == "我"){
      
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
    }
    if(v == "只"){
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
         mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;  
      
    }
    if(v == "致"){
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
      mydiv.innerHTML += s2;
    }
    mydiv.innerHTML += v;

    console.log(str.charAt(s))
    s++;
    console.log(s,)
    var id = setTimeout(typing, 200);
    if (s == str.length) {
      clearTimeout(id);
  
    }


  }
  

  
  window.onload = function () {
    typing();


  }
</script>